<template>
	<div class="box" style="overflow-y: auto;">
		<!-- 样式1 -->
		<home1 :userInfo="userInfo" :amusingList="amusingList" @amusingShare="amusingShare"
			:backgroundImage="backgroundImage" :menuList="menuList"></home1>
	</div>
</template>

<script>
	import home1 from "./home1.vue";
	export default {
		data() {
			return {
				// 趣事分享弹出框
				isShowAmusing: false,
				// 趣事分享文本
				amusingText: "",
				// 趣事分享列表
				amusingList: [],

				backgroundImage: {},

				userInfo: uni.getStorageSync('userInfo'),

				menuList: []
			};
		},

		components: {
			home1,
		},

		async onLoad() {
			await this.getUserInfo()
			// 查询分享列表
			this.getAmusingLIst();
			this.getInit()
			this.getTuijianBack()
		},

		async onPullDownRefresh() {
			await this.getUserInfo()
			this.getTuijianBack();
			this.getAmusingLIst();
			this.getInit()
		},
		
		async onShow() {
			if(this.userInfo._id != uni.getStorageSync("userInfo")._id){
				await this.getUserInfo()
				// 查询分享列表
				this.getAmusingLIst();
				this.getInit()
				this.getTuijianBack()
			}
		},

		methods: {
			// 分享按钮
			async amusingShare(obj) {
				if (this.userInfo.jurisdiction != 1) {
					uni.showToast({
						title: "暂无权限",
						icon: "none",
					});
					return;
				}

				let parmse = {
					amusingText: obj.amusingText ? obj.amusingText : this.amusingText, //分享的内容
					createTime: this.$getTime(), //创建时间
					userName: this.userInfo.nickname, //上传人
					state: "add", //操作数据库的状态
				};

				this.isShowAmusing = false; //提前关闭弹出框
				let result = await this.$axios('amusing', parmse)
				if (result.code == 200) {
					this.getAmusingLIst();
					this.amusingText = "";
				}
			},

			// 获取菜单
			async getInit() {
				let result = await this.$axios('menu', {
					userId: uni.getStorageSync('userInfo')._id,
					location:'ggx'
				}, true)
				if (result.code == 200) {
					this.menuList = result.data || []
					this.menuList.forEach(item => {
						if (!Array.isArray(item.children)) item.children = []
					})
				}
			},
			
			async getUserInfo() {
				let userInfo = uni.getStorageSync('userInfo')
				if(userInfo._id){
					// 验证这个用户是否还存在
					let result = await this.$axios('overallSituation', {
						_id: userInfo._id,
						databaseName:"userList",
						state:'look'
					}, true)
					if (result.code != 200 || !Array.isArray(result.data) || result.data.length == 0) {
						uni.removeStorageSync('userInfo')
						this.userInfo = {}
					}else {
						this.userInfo = uni.getStorageSync('userInfo')
					}
				}
				
			},

			// 查询分享列表
			getAmusingLIst() {
				let parmse = {
					state: "look",
				};

				let number = 0;
				let getList = () => {
					number++;
					this.$axios('amusing', parmse).then(res => {
						this.amusingList = res.data || [];
						uni.stopPullDownRefresh();
						// 获取当前年月日createTime
						let newDate = this.$getTime();
						this.amusingList.forEach((item) => {
							if (newDate == this.$getTime('', item.createTime)) {
								item.flag = true;
							}
						});
					}).catch((err) => {
						if (number > 5) {
							return;
						} else {
							getList(); //再次请求
						}
					});
				};

				getList();
			},



			// 查询分享列表
			getTuijianBack() {
				let parmse = {
					state: "look",
					databaseName: "homeBackGroundImage",
					flag: "1",
				};

				let number = 0;
				// 内部获取数据的函数
				let getList = () => {
					number++;
					this.$axios('overallSituation', parmse).then((res) => {
							this.backgroundImage = res.data[0] || {};
							// 获取当前年月日createTime
							let newDate = this.$getTime();
							this.amusingList.forEach((item) => {
								if (newDate == this.$getTime('', item.createTime)) {
									item.flag = true;
								}
							});
						})
						.catch((err) => {
							if (number > 5) {
								return;
							} else {
								getList(); //再次请求
							}
						});

				};
				getList();
			},

			// 点击笔记本
			gotoNotebook() {
				uni.navigateTo({
					url: "/subPackages/pages/notebook/notebookList"
				});
			},
		},
	};
</script>

<style scoped>
	.topCard {
		width: 100%;
		height: 12vh;
		/* background: blueviolet; */
		padding: 10px;
		box-sizing: border-box;
		border-radius: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		font-weight: 700;
		color: #fff;
		margin-top: 3vh;
		box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.4);
		background-color: #ccdbfc;
		/* background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
	background-image: url('https://gd-hbimg.huaban.com/09d9db5cf37c015bed236573080bc2fde7fcf675fbbfd-L6Ikga_fw240'); */
	}

	.funCard {
		width: 100%;
		height: 30vh;
		margin-top: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.funCard .funCard_left,
	.funCard .funCard_right {
		width: 50%;
		height: 100%;
	}

	.funCard_left .tit {
		display: flex;
		align-items: center;
	}

	.funCard_right .tit {
		display: flex;
		align-items: center;
	}

	.funCard_left .tit .titText {
		margin-left: 10px;
		font-size: 18px;
		font-weight: 700;
		color: #333;
	}

	.funCard_right .tit .titText {
		margin-left: 10px;
		font-size: 18px;
		font-weight: 700;
		color: #333;
	}

	.funCard .funCard_left .left1,
	.funCard .funCard_left .left2 {
		width: 100%;
		height: 49%;
		/* background: red; */
		padding: 10px;
		box-sizing: border-box;
		border-radius: 5px;
		background-repeat: no-repeat;
		background-position: right 95%;
		background-size: 40%;
		box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.4);
		background-color: #fff;
	}

	.funCard .funCard_left .left1 {
		background-image: url("https://gd-hbimg.huaban.com/cc3e60539eaacd735bc5c9a5a31f7df5a42c0182328e-sskBt2_fw658webp");
	}

	.funCard .funCard_left .left2 {
		background-image: url("../../static/jishiben.png");
	}

	.otherFunctionCard div:nth-child(2) {
		background-image: url("../../static/jihua.png");
	}

	.otherFunctionCard div:nth-child(1) {
		background-image: url("../../static/zhangdan.png");
	}

	.otherFunctionCard div:nth-child(3) {
		background-image: url("../../static/zhangdan.png");
	}

	.otherFunctionCard div:nth-child(4) {
		background-image: url("../../static/qinglv.png");
	}

	.funCard .funCard_left .left2 {
		margin-top: 2%;
	}

	.funCard .funCard_right {
		margin-left: 10px;
		padding: 10px;
		border-radius: 5px;
		box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.4);
		box-sizing: border-box;
		background-repeat: no-repeat;
		background-position: right 95%;
		background-color: #fff;
		background-size: 60%;
		background-image: url("../../static/wodezuji.png");
	}

	.otherFunctionCard {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.otherFunctionCard div {
		width: 48%;
		height: 10vh;
		background-color: #fff;
		box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.4);
		background-repeat: no-repeat;
		background-position: left 95%;
		background-size: 30%;
		background-image: url("../../static/wodezuji.png");
		margin-top: 10px;
		line-height: 10vh;
		border-radius: 5px;
		text-align: right;
		padding: 0 10px;
		box-sizing: border-box;
		font-weight: 700;
	}

	.otherFunctionCard div:nth-child(2) {
		background-image: url("../../static/jihua.png");
	}

	.otherFunctionCard div:nth-child(1) {
		background-image: url("../../static/zhangdan.png");
	}

	.playCard {
		width: 100%;
		margin-top: 10px;
	}

	.playCard li {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		margin-bottom: 10px;
		color: #333;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		flex-direction: column;
		box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.4);
		border-radius: 5px;
		align-items: center;
		position: relative;
		overflow: hidden;
	}

	.playCard li .span1 {
		font-size: 14px;
		display: inline-block;
		width: 100%;
		font-weight: 700;
		text-align: left;
	}

	.playCard li p {
		font-size: 12px;
		color: #666;
		display: inline-block;
		width: 100%;
		text-align: right;
		margin-top: 10px;
	}

	.playCard li img {
		width: 30px;
		height: 30px;
		position: absolute;
		top: 0;
		left: 0;
	}

	.amusingBtn {
		width: 90%;
		height: 40px;
		font-size: 14px;
		color: #fff;
		background-color: #ccdbfc;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		position: absolute;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
	}

	.imageBox {
		width: 20px;
		height: 20px;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>